﻿
$(document).ready(function () {
    $('p').eq(1).hide();
    $('a.less').hide();
    /*
    $('a.more').click(function (event) {
    event.preventDefault();
    $('p').eq(1).fadeIn('slow');
    $(this).hide();
    $('a.less').show();
    });

    $('a.less').click(function (event) {
    event.preventDefault();
    $('p').eq(1).fadeOut('slow');
    $(this).hide();
    $('a.more').show();
    });

    */

    /*
    $('a.more').click(function (event) {
    event.preventDefault();
    $('p').eq(1).slideDown('slow');
    $(this).hide();
    $('a.less').show();
    });

    $('a.less').click(function (event) {
    event.preventDefault();
    $('p').eq(1).slideUp('slow');
    $(this).hide();
    $('a.more').show();
    });
    */

    /*
    var firstPara = $('p').eq(1);
    firstPara.hide();

    $('a.more').click(function () {
    if (firstPara.is(':hidden')) {
    firstPara.fadeIn('slow');
    $(this).text('read less');
    }
    else {
    firstPara.fadeOut('slow');
    $(this).text('read more');
    }
    });

    */

    var firstPara = $('p').eq(1);
    firstPara.hide();

    $('a.more').click(function (event) {
        event.preventDefault();
        //firstPara.slideToggle('slow');
        firstPara.animate({ opacity: 'toggle', height: 'toggle' }, 'slow');
        var alink = $('a.more');
        if (alink.text() == 'read more') {
            alink.text('read less');
        } else {
            alink.text('read more');
        }
    });

    var $speech = $('div.speech');
    var defaultFontSize = $speech.css('font-size');

    $('#switcher button').click(function () {
        var num = parseFloat($speech.css('font-size'));
        switch (this.id) {
            case "switcher-large":
                num *= 1.4;
                break;
            case "switcher-small":
                num /= 1.4;
                break;
            default:
                num = parseFloat(defaultFontSize);
        }

        $speech.animate({ fontSize: num + 'px' }, 'slow');
    });

    $('div.label').click(function () {
        var paraWidth = $('div.speech p').outerWidth();
        var $switcher = $(this).parent();
        var switcherWidth = $switcher.outerWidth();

        //$switcher.css({position:'relative'}).animate({ borderWidth: '5px', left: paraWidth - switcherWidth, height: '+=20px' }, 'slow');

        /*$switcher.css({ position: 'relative' })
        .animate({ left: paraWidth - switcherWidth }, 'slow')
        .animate({ height: '+=20px' }, 'slow')
        .animate({borderWidth:'5px'},'slow');*/

        /*
        $switcher.css({ position: 'relative' })
        .fadeTo('fast', 0.5)
        .animate({ left: paraWidth - switcherWidth }, 'slow')
        .fadeTo('slow', 1.0)
        .slideUp('slow')
        .slideDown('slow');*/

        // 当前动画与前一动画同时开始
        /*$switcher.css({ position: 'relative' })
        .fadeTo('fast', 0.5)
        .animate({ left: paraWidth - switcherWidth }, {duration:'slow',queue:false})
        .fadeTo('slow', 1.0)
        .slideUp('slow')
        .slideDown('slow');*/


        /*$switcher.css({ position: 'relative' })
        .fadeTo('fast', 0.5)
        .animate({ left: paraWidth - switcherWidth }, { duration: 'slow', queue: false })
        .fadeTo('slow', 1.0)
        .slideUp('slow')
        .css({ backgroundColor: '#f00' })//单击后立即执行，正确方法如下：
        .slideDown('slow');*/

        $switcher.css({ position: 'relative' })
            .fadeTo('fast', 0.5)
            .animate({ left: paraWidth - switcherWidth }, { duration: 'slow', queue: false })
            .fadeTo('slow', 1.0)
            .slideUp('slow', function () {
                $switcher.css({ backgroundColor: '#f00' });
            })/*
        .queue(function (next) {
            $switcher.css({ backgroundColor: '#f00' });
            next();
        })*/
            .slideDown('slow');

    });

    $('p').eq(2).css('border', '1px solid #333').click(function () {
        var $clickedItem = $(this);
        $clickedItem.next().slideDown('slow', function () {
            $clickedItem.slideUp('slow');
        });
    });
    $('p').eq(3).css({ backgroundColor: '#ccc' }).hide();

    //课后题
    //1.修改样式表，一开始先隐藏页面内容，当页面加载后，慢慢地淡入内容；
    $('#container').fadeIn('slow');

    //2.在鼠标悬停到段落上面时，给段落应用黄色背景；
    $('p').hover(function () {
        $(this).css('background-color', 'yellow');
    }, function () {
        $(this).css('background-color', '');
    });

    //3.单击标题（<h2>）使其不透明度变为25%，同时添加20px的左外边距，当这两个效果完成后，把讲话文本变成50%的不透明度；
    $('h2').css({ position: 'relative' }).click(function () {
        $(this).animate({ opacity: 0.25 }).animate({ left: '+=20px', queue: false }, function () {
            $('div .speech').css('background-color', 'yellow');
        });
        //$(this).animate({ opacity: 0.25 },{ left: '+=20px' },function() { $('div .speech').fadeTo('slow', 0.5); });
    });

    //4.挑战：按下方向键时，使样式转换器向相应的方向平滑移动20像素；四个方向键的键码分别是37（左）、38（上）、39（右）和40（下）。
    
    $(document).keyup(function (event) {
        switch (event.keyCode) {
        case 37:
            $('#switcher').css({position:'relative'}).animate({ left: '-=20px' });
            break;
        case 38:
            $('#switcher').css({ position: 'relative' }).animate({ top: '-=20px' });
            break;
        case 39:
            $('#switcher').css({ position: 'relative' }).animate({ right: '-=20px' });
            break;
        case 40:
            $('#switcher').css({ position: 'relative' }).animate({ bottom: '-=20px' });
            break;
        default:
        }
    });
});